<template>
    <div class="box">
        <van-nav-bar title="首页" />

        <van-tabs v-model:active="active">
            <van-tab title="首页">
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <div style="display: flex;align-items: center;">
                        <sousuo style="flex: 1;" @click="tolist"></sousuo>
                        <van-icon name="coupon-o" />
                    </div>

                    <lunbo :list="list"></lunbo>

                    <van-grid :border="false" :column-num="4">
                        <van-grid-item v-for="(v, i) in nav" :key="i">
                            <van-image :src="v.image_src" />
                        </van-grid-item>
                    </van-grid>

                    <van-grid :border="false" :column-num="2">
                        <van-grid-item v-for="(v, i) in user" :key="i">
                            <van-image
                                :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                            <p>{{ v.goods_name }}</p>
                        </van-grid-item>
                    </van-grid>

                    <van-floating-bubble v-if="hide" style="width: 90%;background: pink;" v-model:offset="offset"
                        axis="xy" icon="chat">
                        <router-link to="/login">一键登录</router-link>
                        <span @click="hideFun()">X</span>
                    </van-floating-bubble>

                </van-pull-refresh>
            </van-tab>
            <van-tab title="我喜欢">内容 2</van-tab>
            <van-tab title="爆款推荐">内容 3</van-tab>
            <van-tab title="限时秒杀">内容 4</van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import sousuo from '@/components/sousuo.vue';
import lunbo from '@/components/lunbo.vue';
const offset = ref({ x: 20, y: 650 });
let hide = ref(true)
hide.value = localStorage.getItem('token') ? false : true
const hideFun = () => {
    hide.value = false
}
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
import { swiperdataApi, catitemsApi, searchApi } from '@/api/api';
import Lunbo from '@/components/lunbo.vue';
let list = ref("")
const getlist = () => {
    swiperdataApi().then(res => {
        list.value = res.data.message
    })
}
getlist()

let nav = ref("")
const navlist = () => {
    catitemsApi().then(res => {
        nav.value = res.data.message
    })
}
navlist()

let user = ref("")
const userlist = () => {
    searchApi().then(res => {
        user.value = res.data.message.goods
    })
}
userlist()
import { showToast } from 'vant';
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        getlist()
        navlist()
        userlist()
    }, 1000);
};

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const tolist = () => {
    router.push('/home/list')
}
</script>

<style lang="scss" scoped>
.box{
    overflow: auto;
}
</style>